<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <!-- 
      生命周期常用钩子函数
        1.mounted：发送ajax请求，启动定时器、绑定自定义事件、订阅消息等【初始化消息】
        2.beforeDestroy:清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】

      关于销毁Vue实例
        1.销毁后借助Vue开发者工具看不到任何信息
        2.销毁后自定义事件会失效，但原生DOM事件依然有效
        3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
      
   -->
  <body>
    <div id="root">
      <h2>当前的n值是:{{n}}</h2>
      <button @click="add">点我n+1</button>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            n: 1,
          }
        },
        // 无法通过Vm/this(实例对象)访问到data中的数据,methods中的方法
        beforeCreate() {
          console.log('在此之前,初始化:生命周期、事件、但数据代理还未开始')
        },
        // 此时可以通过vm中data中的数据、methods中配置的方法
        created() {
          console.log('在此之前,初始化:数据监测、数据代理')
        },
        //1.页面呈现的是未经Vue编译的DOM结构 2.对所有DOM的操作,最终都不奏效(什么意思?我在这里边写对dom元素操作,都没有作用)
        beforeMount() {
          console.log(
            '在此之前,Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容',
          )
        },
        //1.页面中呈现是经过Vue编译得Dom 2.对Dom的操作均有效都是初始化的过程
        mounted() {
          console.log(
            '在此之前,Vue完成模板的解析,将内存中虚拟Dom转为真实Dom并把初始的真实DOM放入页面后(挂载完毕)',
          )
        },
        //此时数据是新的,但页面还是旧的,即:页面尚未和数据保持同步
        beforeUpdate() {},
        //此时数据是新的,页面也是新的,即:页面和数据保持同步
        updated() {
          console.log(
            '在此之前新数据生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新,即:完成了Model=>View更新',
          )
        },
        // Vm中所有的:data、methods、指令等等都处于可用状态,马上要执行销毁的过程,一般在此阶段关闭定时器、取消订阅消息、解绑自定义事件首尾工作
        beforeDestroy() {},
        // 销毁
        destroyed() {
          console.log(
            '如果我们主动调用vm.$destroy()时候发现页面内容还在，因为我们vm销毁了但是之前做的工作没删呀，平时用route或者切换页面发现整个被清楚了，',
          )
          //   开发中很少自己调用vm.$detroyed,这里说明是为了更好理解原理
        },

        methods: {
          add() {
            this.n++
          },
        },
      })
    </script>
  </body>
</html>
